<!-- Feedback Floating Action Button -->
<div id="feedback-fab" class="fixed bottom-5 right-5 z-50">
  <button
    id="open-feedback-btn"
    class="flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg transition-transform duration-300 hover:scale-110 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300"
    aria-label="Open feedback form"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-7 w-7"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        d="M10 2.5a.75.75 0 01.75.75v.5a.75.75 0 01-1.5 0v-.5A.75.75 0 0110 2.5z"
      />
      <path
        d="M7.5 6a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5zM6 10a.75.75 0 000 1.5h8a.75.75 0 000-1.5H6z"
      />
      <path
        fill-rule="evenodd"
        d="M2 5a3 3 0 013-3h10a3 3 0 013 3v10a3 3 0 01-3 3H5a3 3 0 01-3-3V5zm3-2a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5z"
        clip-rule="evenodd"
      />
    </svg>
  </button>
</div>

<!-- Feedback Modal -->
<div
  id="feedback-modal"
  class="fixed inset-0 z-50 flex hidden items-center justify-center bg-black bg-opacity-60 transition-opacity duration-300"
>
  <!-- Modal Content -->
  <div
    class="relative w-full max-w-md transform rounded-2xl bg-white p-8 text-center shadow-2xl transition-all duration-300 scale-95 opacity-0"
  >
    <!-- Close Button -->
    <button
      id="close-feedback-btn"
      class="absolute -top-2 -right-2 flex h-9 w-9 items-center justify-center rounded-full bg-slate-200 text-slate-600 transition-all hover:bg-slate-300 hover:rotate-90 focus:outline-none"
      aria-label="Close feedback modal"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18L18 6M6 6l12 12"
        />
      </svg>
    </button>

    <!-- Title -->
    <h3
      class="mb-3 text-2xl font-bold text-slate-800"
      data-i18n="feedback.title"
    >
      提交反馈或功能需求
    </h3>

    <!-- Description -->
    <p class="mb-6 text-slate-600" data-i18n="feedback.description">
      扫描二维码或点击下方按钮，提交您宝贵的反馈。
    </p>

    <!-- QR Code -->
    <div class="mb-6 flex justify-center">
      <img
        src="assets/feishu-feedback-erweima.png"
        alt="Feishu Form QR Code"
        class="w-48 rounded-lg border-4 border-slate-200"
      />
    </div>

    <!-- Action Button -->
    <a
      href="https://starkyuan.feishu.cn/share/base/form/shrcn3S3vYcKz18AMT1vcfO81Yc"
      target="_blank"
      rel="noopener noreferrer"
      class="inline-block w-full rounded-full bg-blue-600 px-8 py-4 text-lg font-semibold text-white transition-all hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300"
      data-i18n="feedback.button"
    >
      前往反馈表单
    </a>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const openBtn = document.getElementById("open-feedback-btn");
    const closeBtn = document.getElementById("close-feedback-btn");
    const modal = document.getElementById("feedback-modal");
    const modalContent = modal ? modal.querySelector("div") : null;

    if (openBtn && modal && closeBtn && modalContent) {
      const openModal = () => {
        modal.classList.remove("hidden");
        // Use a short timeout to allow the 'hidden' class removal to be processed
        // before starting the transition.
        setTimeout(() => {
          modal.classList.add("opacity-100");
          modalContent.classList.remove("opacity-0", "scale-95");
          modalContent.classList.add("opacity-100", "scale-100");
        }, 10);
      };

      const closeModal = () => {
        modalContent.classList.add("opacity-0", "scale-95");
        modal.classList.remove("opacity-100");
        setTimeout(() => {
          modal.classList.add("hidden");
        }, 300); // Match the duration-300 class
      };

      openBtn.addEventListener("click", openModal);
      closeBtn.addEventListener("click", closeModal);
      
      // Close modal if clicking on the background overlay
      modal.addEventListener("click", (e) => {
        if (e.target === modal) {
          closeModal();
        }
      });
    }
  });
</script> 